<template>
  <el-row class="plan-box">
    <div class="plan-tips">
      <h2>项目详情</h2>
      <span>（选填项，一份详细又漂亮的项目运营方案更容易勾搭赞助商哟！）</span>
    </div>
    <el-form :model="form" label-width="120px">
      <el-form-item label="电脑端描述：">
        <el-col :span="20">
          <p class="pc-tips">包括但不限于：项目简介、受众人群、项目规模。</p>
          <editor v-model="form.sponsorBaseDetails.pcDetails"/>
        </el-col>
      </el-form-item>
      <div class="el-form-item">
        <label class="el-form-item__label" style="width: 160px;">
            <span>附件（选填）</span>
            <el-tooltip class="item" effect="light" placement="top">
              <div slot="content">支持格式： .xls;.xlsx;.txt;.jpg;.doc;.docx;.pdf;.ppt;.pptx;<br/>文件大小：10MB</div>
              <i class="iconfont">&#xe690;</i>
            </el-tooltip>
            <span>：</span>
        </label>
        <div class="el-form-item__content" style="margin-left: 160px;">
          <div class="el-col el-col-12">
            <file-upload
              :file-list.sync="form.fileVOList"
              fileAccept=".xls,.xlsx,.txt,.jpg,.doc,.docx,.pdf,.ppt,.pptx"
              :maxfileSize='10'>
              <el-button>上传</el-button>
            </file-upload>
          </div>
        </div>
      </div>
      <div class="button-box">
        <el-button type="default" @click="prev()" v-if="!id">上一步</el-button>
        <el-button type="primary" :loading="loading" @click="submitAudit()" v-if="!id">提交审核</el-button>
        <el-button type="primary" :loading="loading" v-if="id" @click="save()">保存</el-button>
      </div>
    </el-form>
  </el-row>
</template>
<script>
  import { mapGetters } from 'vuex'
  import Editor from '../../components/Editor'
  import FileUpload from '../../components/FileUpload'
  import validator from '../../../utils/validator'
  import api from 'api/merchants'
  export default{
    props: {
      activeChange: {
        type: Function
      }
    },
    components: {
      Editor,
      FileUpload
    },
    computed: {
      ...mapGetters({
        form: 'merchants_form'
      })
    },
    data () {
      return {
        validator,
        id: this.$route.params.id,
        loading: false,
        planData: {
          fodderList: [], // 附件上传
          sponsorBaseDetails: { // 招商详细信息
            pcDetails: '' // pc端的详细信息
          }
        }
      }
    },
    created () {
      this.activeChange(3)
    },
    methods: {
      prev () { // 因点下一步才保存cookies，最后一步已到提交步骤故不做保存cookies
        this.$router.push({path: '/sponsor/merchants/set'})
      },
      save () {
        let formdata = Object.assign({}, this.form) // 复制一个新的数据对象
        let plandata = Object.assign({}, this.planData) // 复制一个新的数据对象
        for (let attr in plandata) { // 将返回来的数据做跟我的form里面的数据要一一对应进来，只拿form所需要的数据
          plandata[attr] = formdata[attr]
        }
        plandata.fodderList = formdata.fileVOList.map(function (item) { // 将表单绑定的附件上传转成后台接受的格式
          return {
            fileName: item.name,
            fileUrl: item.path
          }
        })
        plandata.id = this.id
        api.details_update(JSON.stringify(plandata), {context: this, successMsg: 'none'}).then((json) => {
          this.$message.success('修改成功')
        }).catch(() => {
          this.$message.warning('服务器繁忙，请稍后再试！')
        })
      },
      submitAudit () {
        let formdata = Object.assign({}, this.form) // 复制一个新的数据对象
        formdata.addressTime.map(function (item) {
          formdata.sponsorAreaList.push({ // 将我表单的时间地点转换成后台接受的格式
            city: item.areas[1], // 市
            detailsAddress: item.address, // 详细地址
            endTime: item.activityTime[1], // 时间
            province: item.areas[0], // 省
            startTime: item.activityTime[0]
          })
        })
        formdata.projectList.map(function (item) { // 将我表单的比赛项目转换成后台接受的格式
          formdata.sponsorProjectList.push({
            projectType: item
          })
        })
        formdata.fileVOList.map(function (item) { // 将我表单的附件上传转换成后台接受的格式
          formdata.fodderList.push({
            fileName: item.name,
            fileUrl: item.path
          })
        })
//      for (let item of formdata.rightsDetailList) {
//        if (item.realPrice === '') {
//          item.realPrice = 0
//        }
//        if (item.investmentAmount === '') {
//          item.investmentAmount = 0
//        }
//      }
        for (let item of formdata.rightsDetailList) {
          if (item.sponsorType === 1) { // 如果只选了现金的话，那么实物价格为0
            item.realPrice = 0
          } else if (item.sponsorType === 2) { // 如果只选了物质的话，那么现金价格为0
            item.investmentAmount = 0
          }
        }
        formdata.rightsDetailList = this.form.rightsDetailList.map(function (item) {
          return {
            exclusiveStatus: item.exclusiveStatus, // 是否排他：0否 ，1是
            investmentAmount: parseInt(item.investmentAmount) * 100, // 招商金额/现金赞助（单位：分） 将单位元转换成分
            realPrice: parseInt(item.realPrice) * 100, // 实物总价/物品赞助 (单位：分) 将单位元转换成分
            rightsDetails: item.rightsDetails, // 子权益列表
            rightsName: item.rightsName, // 权益名称
            rightsTypeCode: item.rightsTypeCode, // 权益类型
            sponsorType: item.sponsorType // 赞助类型/方式
          }
        })
        api.merchants_add(JSON.stringify(formdata), {context: this, successMsg: 'none'}).then((json) => {
          this.$router.push({path: '/sponsor/merchants/check'}) // 只有成功的时候才会跳到check成功页面
          this.$store.commit('SPONSOR_MERCHANTS_SET_FORM') // 点提交的时候需要重置表单
        }).catch(() => {
          this.handleSubmitSuccess()
          return false
        })
      },
      handleSubmitSuccess () { // 弹窗的信息
        this.$confirm('服务器繁忙，请稍后再试！', '温馨提示', { // 执行成功的回调
          type: 'warning',
          showCancelButton: false,
          callback () {
            this.$router.push({path: '/sponsor/merchants/check'})
          }
        })
      }
    }
  }
</script>
<style lang="scss">
  .plan-box{
    margin-top:60px;
    .pc-tips{
      color:red;
      font-size:12px;
      margin-bottom: 20px;
    }
    .button-box{
      margin-top: 100px;
    }
    .plan-tips{
      margin-bottom: 50px;
      h2{
        font-size:16px;
        display: inline-block;
        color:#353535;
        margin:0px 22px;
      }
      span{
        color:#9e9e9e;
        font-size:12px;
      }
    }
  }
</style>
